<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>编辑产品</title>
<!-- 引入CSS和JS文件   -->
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/x-layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/x-admin.css" media="all">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script type="text/javascript" src="js/global.js"></script>

</head>

<body>
	<div class="x-body">
		<form class="layui-form" id="addproform">
		    <!-- 定义一个隐藏文本域，用来储存当前商品的产品id -->
			<input type="hidden" id="id" name="id"/>
		
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>产品名称
				</label>
				<div class="layui-input-inline">
					<input type="text" id="name" name="name" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>材质
				</label>
				<div class="layui-input-inline">
					<input type="text" id="materail" name="materail" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="phone" class="layui-form-label"> <span
					class="x-red">*</span>售价
				</label>
				<div class="layui-input-inline">
					<input type="text" id="saleprice" name="saleprice" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>市场价
				</label>
				<div class="layui-input-inline">
					<input type="text" id="marketprice" name="marketprice" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>


			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>品牌
				</label>
				<div class="layui-input-inline">
					<input type="text" id="brand" name="brand" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>型号
				</label>
				<div class="layui-input-inline">
					<input type="text" id="model" name="model" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>风格
				</label>
				<div class="layui-input-inline">
					<input type="text" id="style" name="style" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>颜色
				</label>
				<div class="layui-input-inline">
					<input type="text" id="color" name="color" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>款式定位
				</label>
				<div class="layui-input-inline">
					<input type="text" id="stylepositioning" name="stylepositioning"
						required="" autocomplete="off" class="layui-input">
				</div>
			</div>


			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>设计元素
				</label>
				<div class="layui-input-inline">
					<input type="text" id="elements" name="elements" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>产品类型
				</label>
				<div class="layui-input-inline">
					<!--  <input type="text" id="producttypetable_id" name="producttypetable_id"
						required="" autocomplete="off" class="layui-input"> -->
						<select id="producttypetable_id" name="producttypetable_id"></select>
				</div>
			</div>
			<!-- 定义一个隐藏文本域，用来储存当前商品的产品类型 -->
			<input type="hidden" id="curproducttype" name="curproducttype"/>

			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>主图
				</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="mainpicbtn">
						<i class="layui-icon">&#xe67c;</i>上传主图
					</button>
				</div>
			</div>
			<!-- 存储上传产品主图的地址 -->
			<input type="hidden" id="mainpic" name="mainpic">
			<div id="mainpicdiv">
				<img alt="" src="" width="100px" height="100px" id="mainShow">
			</div>

			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>是否组装
				</label>
				<div class="layui-input-inline">
					<input type="radio" name="pack" id="pack" value="0"
						title="不组装" checked> <input type="radio" name="pack"
						id="pack" value="1" title="组装">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>是否定制
				</label>
				<div class="layui-input-inline">
					<input type="radio" name="customized" id="customized" value="0"
						title="不定制" checked> <input type="radio" name="customized" id="customized"
						value="1" title="定制">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>是否推荐
				</label>
				<div class="layui-input-inline">
					<input type="radio" name="recommend" id="recommend" value="0"
						title="不推荐" checked> <input type="radio" name="recommend" id="recommend"
						value="1" title="推荐">
				</div>
			</div>


			<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>是否上轮播
				</label>
				<div class="layui-input-inline">
					<input type="radio" name="rotation" id="rotation" value="0" title="不轮播"
						checked> <input type="radio" id="rotation" name="rotation" id="rotation"
						value="1" title="轮播">
				</div>
			</div>
			<div class="layui-form-item" id="rotationpicdiv">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>轮播图
				</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="rotationpicbtn">
						<i class="layui-icon">&#xe67c;</i>上传轮播图
					</button>
				</div>
			</div>
			<input type="hidden" id="rotationpic" name="rotationpic">
			<div id="rotationpicShowDiv">
				<img alt="" src="" width="100px" height="100px" id="rotationpicShow" />
			</div>

			<div class="layui-input-block">
				<div class="layui-form-item">
					<button class="layui-btn" lay-filter="add" lay-submit>增加</button>
				</div>
			</div>

		</form>
	</div>
</body>

<script>
	layui.use([ 'upload', 'form' ], function() {
		var upload = layui.upload;//加载upload上传文件的组件
		var form = layui.form;//引入form组件
		var $ = layui.$;//加载jQ组件
		//隐藏区域
		//$("#mainpicdiv").hide();
		//$("#rotationpicShowDiv").hide();
		//执行实列
		var uploadInst = upload.render({
			elem : '#mainpicbtn',//绑定元素
			url : './MainPicServlet',//上传接口 
			done : function(res){
				//上传完毕回调
				if(res.success == true){
					//回显图片	
				    $('#mainShow').attr("src","productpic/" + res.remark);
					//将后台返回的图片地址设置到隐藏域中
					$("#mainpic").val("productpic/" + res.remark);
					layer.msg("图片上传成功！");
					//显示隐藏的内容
					$("#mainpicdiv").show();
				}
			},
			error : function(){
				//请求异常
				layer.msg("请求异常");
			}
		});
		
		//执行实列
		var uploadInst = upload.render({
			elem : '#rotationpicbtn',//绑定元素
			url : './RotationPicServlet',//上传接口 
			done : function(res){
				//上传完毕回调
				if(res.success == true){
					//回显图片
					$('#rotationpicShow').attr("src","productpic/rotation/" + res.remark);
					//将后台返回的图片地址设置到隐藏域中
					$("#rotationpic").val("productpic/rotation/" + res.remark);
					layer.msg("图片上传成功！");
					//显示隐藏的内容
					$("#rotationpicShowDiv").show();
				}
			},
			error : function(){
				//请求异常
				layer.msg("请求异常");
			}
		});
		
		//编辑产品
   		form.on('submit(add)',function(){
   			//获取用户输入的角色信息 -- 并封装参数
   			//alert(JSON.stringify($('#addproform').serializeArray()));
   			
   			//alert($("#producttypetable_id").val());
   			var param = {
   				"id":$("#id").val(),
   				"name":$("#name").val(),
   				"materail":$("#materail").val(),
   				"saleprice":$("#saleprice").val(),
   				"marketprice":$("#marketprice").val(),
   				"brand":$("#brand").val(),
   				"model":$("#model").val(),
   				"style":$("#style").val(),
   				"color":$("#color").val(),
   				"stylepositioning":$("#stylepositioning").val(),
   				"elements":$("#elements").val(),
   				"producttypetable_id":$("#producttypetable_id").val(),
   				"mainpic":$("#mainpic").val(),
   				"pack":$("#pack").val(),
   				"customized":$("#customized").val(),
   				"recommend":$("#recommend").val(),
   				"rotation":$("#rotation").val(),
   				"rotationpic":$("#rotationpic").val()
   			}; 

   			//定义接口地址
   			var add_pro_url = "ProductServlet?url=edit";
   			
   			//$('#addRoleForm').serialize() -- 获取表单中用户输的的信息，并序列化
   			$.post(add_pro_url,param,function(res){
   				
   				if(res.success == true){
   					layer.alert('编辑成功！',function(){
   						//关闭编辑角色的窗口
   						// 根据父窗口获取当前窗口frame的索引
	               		var index = parent.layer.getFrameIndex(window.name);
	                	// 使用父窗口来关闭当前子窗口frame
	                	parent.layer.close(index);
	                	//刷新父窗口 -- 重载父窗口
	                	window.parent.location.reload();
   					});
   				}else{
   					layer.alert('编辑失败！');
   				}
   				
   			},'json')
   			return false;//这一句话一定要加上**
   		});
		//调用接口获取产品类型，并动态显示到下拉列表中
		$.post("ProductlistServlet?url=typeLsit","",function(res){
			//遍历接口返回的产品类型列表，把产品类型信息显示到下拉列表中
			var option = "<option value='-1'>--请选择--</option>"
			
			//获取当前产品类型中隐藏文本域的值
			var curproducttype = $("#curproducttype").val();
			for(var i = 0 ; i < res.data.length ; i++){
				var obj = res.data[i];
				if(curproducttype == obj.id){
					option = option + "<option value='"+ obj.id +"' selected='selected'>"+ obj.productname +"</option>";
				}else{
					option = option + "<option value='"+ obj.id +"'>"+ obj.productname +"</option>";
				}
				
			}
			//获取下拉列表，并把下拉选项添加到下拉列表中
			$("#producttypetable_id").html(option);
			//重新渲染下拉列表
			form.render("select");
		},"json");
		
	});
</script>

</html>